<template>
  <div class="get_discount">
    <!-- <p class="watchStatus">
      {{logInfo}}
    </p> -->
    <div class="index">
      <div class="decorate"></div>
      <div class="head">
        <div class="head_title"><img src="../assets/images/sf_index_title.png" alt="参加达人秀"></div>
        <div class="head_bg"><img src="../assets/images/sf_bg_head.jpg" alt=""></div>
      </div>
      <div class="main">
        <div class="main_title">
          <h1>
            <span>恭喜通过旺旺达人秀选拔</span>
          </h1>
          <p> 可获得旺旺Special 300元无门槛优惠券！</p>
        </div>
        <div @click="verifyPopup=true" class="main_content">
          <div class="sale">
            <img src="../assets/images/sale_note.png" alt="优惠卷">
          </div>
          <div class="button">
            <a>立即领取</a>
          </div>
        </div>
      </div>
    </div>

    <transition name="verifyPopupTransition">
      <div class="popup" v-show="verifyPopup">
        <div :class="['popup_texture', verifyStatus==='' ? 'show':'']"></div>

        <transition name="verifyFormTransition">
          <div v-if="verifyStatus===''" class="verify_form" @mousemove="watchMouse">
            <div :class="['form_inner',formVerifyError?'form_verify_error':'',virtualKeyboard?'virtual_keyboard':'',isiOS?'is_iOS':'',isAndroid?'is_Android':'',isInput1?'is_input1':'',isInput2?'is_input2':'',input1Activated?'input1_activated':'']">
              <div @click="verifyPopup=false" class="close"></div>
              <form @submit.prevent="validateBeforeSubmit" :class="['form',virtualKeyboard?'mobile':'']">
                <div class="inputGrop">
                  <input :class="{'input': true, 'is_error': errors.has('手机号') }" name="手机号" v-validate="'required|digits:11'" type="text" @input="watchString($event)" @focus="input1Focus" @blur="input1Blur">
                  <p class="tips">{{ errors.first('手机号') }}</p>

                  <label :class="[label1State ? 'active' : '']">手机号</label>
                  <button type="button" :disabled="countDowningButton" @click="getVerificationCode" :class="[!buttonOriginStatus?'origin_status':'']">{{getVerificationCodeInfo}}</button>
                </div>
                <div class="inputGrop">
                  <input :class="{'input': true, 'is_error': errors.has('验证码') }" name="验证码" v-validate="'required|digits:6'" type="text" @focus="input2Focus" @blur="input2Blur($event)">
                  <p class="tips">{{ errors.first('验证码') }}</p>
                  <label :class="[label2State ? 'active' : '']">验证码</label>
                </div>
                <button type="submit">
                  <span>立即领取</span>
                </button>
              </form>
            </div>
          </div>
        </transition>

        <transition name="verifySucceedTransition">
          <div v-if="verifyStatus==='succeed'" class="verify_succeed">
            <div class="inner">
              <div class="decorate"></div>
              <div :class="['head',verifyResult?'act':'']">
                <div class="head_bg">
                  <div class="title_text"><img src="../assets/images/sf_succeed_bg_title_3_text.jpg" alt=""></div>
                  <img src="../assets/images/sf_succeed_bg_title_3.jpg" alt="">
                </div>
              </div>
              <div :class="['main',verifyResult?'act':'']">
                <div class="main_content">
                  <div :class="['content_mode act']">
                    <img src="../assets/images/sf_succeed_mode.png" alt="succeed_mode">
                  </div>
                  <div class="content_title">
                    <span>如何使用</span>
                  </div>
                  <ul class="content_list">
                    <li>下载 旺仔旺铺APP</li>
                    <li>通过简讯验证码登录，即可 使用优惠券
                      <i> (需与领取时填入的手机号码一致)</i>
                    </li>
                    <li>
                      <i>扫码下载<br>旺仔旺铺APP</i>
                    </li>
                  </ul>
                </div>
                <div :class="['main_sub',verifyResult?'act':'']">
                  <div class="sub_title">
                    <i></i>
                    <span>备注</span>
                    <i></i>
                  </div>
                  <ol class="sub_list">
                    <li>系统自动匹配手机号码，请注意输入的手机号码需与</li>
                    <li>每个ID、每支手机号码限领取一次</li>
                    <li>优惠券有效使用期限：领取后7天内有效</li>
                  </ol>
                </div>
              </div>
            </div>
          </div>
        </transition>

        <transition name="verifySucceedTransition">
          <div v-if="verifyStatus==='field'" class="verify_field">
            <div class="inner">
              <div class="decorate"></div>
              <div class="head">
                <div class="head_bg">
                  <img src="../assets/images/sf_field_bg_head.jpg" alt="">
                </div>
              </div>
              <div :class="['main',verifyResult?'act':'']">
                <div class="main_content">
                  <div class="content_mode">
                    <img src="../assets/images/sf_field_mode.png" alt="succeed_mode">
                  </div>
                  <div class="content_context">欢迎到旺仔旺铺APP领取其他活动优惠券
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="147.7px" height="164px" viewBox="0 0 147.7 164" style="enable-background:new 0 0 147.7 164;" xml:space="preserve">
                      <path class="st0" d="M0.5,163.5h141c0,0-39.1-27.3-42-82c-3-57,46-81,46-81s-72.2-0.3-110,58S0.5,163.5,0.5,163.5z" />
                    </svg>
                  </div>
                  <div class="content_title">
                    <span>如何领取</span>
                  </div>
                  <ul class="content_list">
                    <li>下载 旺仔旺铺APP</li>
                    <li>领取各样优惠券，先领券、再购物、更优惠！
                    </li>
                    <li>
                      <i>扫码下载<br>旺仔旺铺APP</i>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </transition>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data () {
    return {
      //process operations
      verifyPopup: false,
      verifyStatus: '',
      verifyResult: false,
      // input operations
      string1Length: 0,
      string2Length: 0,
      eyePositionX: 0,
      eyePositionY: 0,
      eyeClose: false,
      eyeBlink: false,
      label1State: false,
      label2State: false,
      virtualKeyboard: false,
      isiOS: !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
      isAndroid: navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1,
      isInput1: false,
      isInput2: false,
      input1Activated: false,
      positionReset: false,
      buttonOriginStatus: false,
      countDowningButton: false,
      phoneNumber: '',
      verigicationCode: '',
      getVerificationCodeInfo: '获取验证码',
      windowH: document.documentElement.clientHeight,
      windowW: document.documentElement.clientWidth,
      formVerifyError: false,
      logInfo: '验证码 666666'
    }
  },
  methods: {
    // process operations
    reVerify () {
      this.verifyStatus = 'test'
      setTimeout(() => {
        this.verifyStatus = ''
      }, 1500);
    },
    // input operations
    watchString (event) {
      this.string1Length = event.currentTarget.value.length

      if (event.currentTarget.value.length < 12) {
        this.eyePositionX = event.currentTarget.value.length / 100 - 0.015
      }
      if (event.currentTarget.value.length > 1) {
        this.buttonOriginStatus = true
      }
      if (event.currentTarget.value.length === 11) {

        this.phoneNumber = event.currentTarget.value
        this.eyeBlink = true
        setTimeout(() => {
          this.eyeBlink = false
        }, 1000);
      }
      this.eyePositionY = .18
    },
    watchMouse (event) {
      let dw = document.documentElement.clientWidth / .10;
      let dh = document.documentElement.clientHeight / .22

      this.eyePositionX = event.pageX / dw;
      this.eyePositionY = event.pageY / dh;
    },
    input1Focus () {
      this.label1State = true
      this.isInput1 = true
      if ((this.isiOS || this.isAndroid) && this.windowW < 400) {
        this.virtualKeyboard = true
      }
    },
    input1Blur () {
      this.virtualKeyboard = false
      this.isInput1 = false
      console.log();

      if (this.string1Length === 0) {
        console.log('xixixi');

        this.label1State = false
      }

    },
    input2Focus () {
      this.eyeClose = true
      this.eyePositionX = 0
      this.eyePositionY = 0
      this.label2State = true
      this.isInput2 = true
      this.input1Activated = true
      if ((this.isiOS || this.isAndroid) && this.windowW < 400) {
        this.virtualKeyboard = true
      }
    },
    input2Blur (event) {
      this.labelState = 0
      this.eyeClose = false
      this.virtualKeyboard = false
      this.isInput2 = false
      this.positionReset = true
      this.verigicationCode = event.currentTarget.value
      this.string2Length = event.currentTarget.value.length
      if (this.string2Length === 0) {
        this.label2State = false
      }
    },
    watchWindowResize () {
      let windowHafter = document.documentElement.clientHeight
      let windowHchange = this.windowH - windowHafter
      console.log(windowHchange);

      if (windowHchange > 100) {
        this.virtualKeyboard = true
      } else {
        this.virtualKeyboard = false
      }
    },
    watchWindowScroll () {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    },
    submitForm () {
      if (this.string1Length === 0 || this.string2Length === 0) {
        this.formVerifyError = true
      }
      setTimeout(() => {
        this.formVerifyError = false
      }, 1000)
    },
    // verify form components
    validateBeforeSubmit () {
      this.$validator.validateAll().then((result) => {
        if (result) {

          this.virtualGetSale();

          this.$ajax({
            method: 'get',
            url: 'http://music.163.com/api/playlist/detail?id=19723756',
          })
            .then(function (res) {
              console.log(res.data.result.tracks[0].name)
              if (this.logInfo) {
                alert('领取成功')
              } else {
                alert('没有之歌')
              }
            }.bind(this))

            .catch(function (err) {
              console.log(err)
            })
          return;
        }
        this.formVerifyError = true;
        setTimeout(() => {
          this.formVerifyError = false
        }, 1000)
      });
    },
    getVerificationCode () {

      console.log(this.phoneNumber);
      // this.virtualGetData()
      // this.$ajax({
      //   method: 'get',
      //   url: 'http://api.douban.com/v2/movie/top250?start=25&count=25',
      // }).then(function (res) {
      //   console.log(res.data)
      //   console.log(res);
      //   this.countDowningButton = true
      //   let countDown = 60
      //   let countDownTimer = setInterval(() => {
      //     countDown--
      //     this.getVerificationCodeInfo = '重新获取(' + countDown + 's)'
      //   }, 1000)
      //   setTimeout(() => {
      //     clearInterval(countDownTimer)
      //     this.getVerificationCodeInfo = '获取验证码'
      //     this.countDowningButton = false
      //   }, 60000);
      // }.bind(this)).catch(function (err) {
      //   console.log(err);
      //   this.getVerificationCodeInfo = '获取失败'
      // })
      // this.$ajax({
      //   method:'get',
      //   url:'api/ceo/sendValidationCode.ctrl',
      //   data:{
      //     "mobileNumber":"17621063119"
      //   }
      // })
      // axios
      //   .post('http://www.hotkidceo.com:8082/member/sendValidationCode.ctrl',{
      //     "mobileNumber":"17621063119"
      //   })
      //   .then(response => (console.log(response)
      //   ))
      var settings = {
      "async": true,
      "crossDomain": true,
      "url": "http://www.hotkidceo.com:8082/member/sendValidationCode.ctrl",
      "method": "POST",
      "headers": {
        "Content-Type": "application/json",
        "Cache-Control": "no-cache",
        "Postman-Token": "dedea2ce-1c24-4461-acc1-855c2ac88527"
      },
      "processData": false,
      "data": "{\n  \"mobileNumber\":\"17621063119\"\n}"
    }

    $.ajax(settings).done(function (response) {
      console.log(response);
    });

    },
    virtualGetData () {
      this.countDowningButton = true
      let countDown = 60
      let countDownTimer = setInterval(() => {
        countDown--
        this.getVerificationCodeInfo = '重新获取(' + countDown + 's)'
      }, 1000)
      setTimeout(() => {
        clearInterval(countDownTimer)
        this.getVerificationCodeInfo = '获取验证码'
        this.countDowningButton = false
      }, 60000);
    },
    virtualGetSale () {
      setTimeout(() => {
        this.verifyResult = true
      }, 1000);
      if (this.verigicationCode === '777777') {
        this.verifyStatus = 'field'
      }
      if (this.verigicationCode === '666666') {
        this.verifyStatus = 'succeed'
        //this.verifyPopup = false

      } else {
        this.formVerifyError = true;
        setTimeout(() => {
          this.formVerifyError = false
        }, 1000)
      }
    }
  },
  mounted () {
    //window.onresize = this.watchWindowResize
    //window.addEventListener('scroll', this.watchWindowScroll)
  }

}
</script>
<style lang='stylus' scoped>
@import '../assets/styles/index.styl';
  
@import '../assets/styles/keyframes.styl';

.get_discount {
  height: 100%;
  width: 100%;

  & .index {
    height: 100%;
    width: 100%;
    background-color: co_6;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center top;

    & .head {
      @media (min-height: 700px) {
        margin-bottom: 30px;
      }

      & .head_title {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        padding: 88px 0;

        @media (max-height: 580px) {
          padding-top: 75px;
        }

        @media (min-width: 400px) {
          padding-top: 100px;
        }

        width: 220px;

        & img {
          width: 100%;
          animation: shake-little 5s linear infinite;
        }
      }

      & .head_bg {
        width: 100%;
        top: 0;
        left: 0;

        & img {
          width: 100%;
        }
      }
    }

    & .main {
      width: 85%;
      overflow: hidden;
      margin: 0px auto;
      position: relative;
      z-index: 1;

      & .main_title {
        text-align: center;

        & h1 {
          font-size: 18px;
          color: co_4;
          margin-bottom: 8px;
          position: relative;

          & span {
            position: relative;
            z-index: 2;
            background: co_6;
            padding: 0 5px;
          }

          &:before, &:after {
            top: 45%;
            transition: translateY(-50%);
            content: '';
            display: inline-block;
            background: co_4;
            width: 100px;
            height: 1px;
            position: absolute;
          }

          &:before {
            left: -40px;
          }

          &:after {
            right: -40px;
          }
        }

        & p {
          font-size: 14px;
          color: co_4;
          opacity: 0.7;
          margin: 0;
        }
      }

      & .main_content {
        & .sale {
          position: relative;
          overflow: hidden;
          margin: 25px auto;

          @media (max-height: 580px) {
            margin: 15px auto;
          }

          &:before {
            position: absolute;
            height: 50px;
            width: 100%;
            content: '';
            display: inline-block;
            background: #fff;
            transform: rotate(45deg);
            left: 10%;
            filter: blur(20px);
            box-shadow: 0 0 20px #fff;
            opacity: 0.3;
            animation: shine 3500ms infinite;
            mix-blend-mode: lighten;
          }

          & img {
            width: 100%;
          }
        }

        & .button {
          @media (max-height: 580px) {
            transform: scale(0.8);
            position: relative;
            top: -5px;
            // display: none;
          }

          margin: 0 auto;
          width: 100%;
          height: 60px;
          background: co_4;
          border-radius: 30px;
          text-align: center;
          line-height: 60px;
          letter-spacing: 2px;
          position: relative;
          font-size: 18px;
          overflow: visible;
          margin-bottom: 30px;
          cursor: pointer;

          &:before {
            content: '';
            display: block;
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            width: 85%;
            height: 90%;
            background: co_4;
            filter: blur(10px);
            z-index: 0;
          }

          & a {
            display: inline-block;
            width: 100%;
            height: 60px;
            position: relative;
            z-index: 1;

            &:before {
              opacity: 0.7;
              top: 10px;
              left: 25px;
              position: absolute;
              display: block;
              content: '';
              height: 5px;
              width: 60px;
              border-radius: 30px;
              background: #fff;
            }

            &:after {
              opacity: 0.7;
              top: 10px;
              left: 90px;
              position: absolute;
              display: block;
              content: '';
              height: 6px;
              width: 6px;
              border-radius: 50%;
              background: #fff;
            }
          }
        }
      }
    }

    & .decorate {
      z-index: 0;
      height: 100%;
      width: 100%;
      position: absolute;
      background-image: url('../assets/images/sf_bg_decorate.png');
      background-repeat: no-repeat;
      background-position: center top;
      background-size: 130%;
      // display: none;
    }
  }

  & .popup {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;

    & .popup_texture {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 120%;
      width: 120%;
      filter: blur(30px);
      background: co_6;
      background-image: url('../assets/images/popup_texture_2.jpg');
      background-repeat: no-repeat;
      background-size: 95% auto;
      background-position: center top;
      opacity: 1;
      transition: 3s ease;

      &.show {
        opacity: 1;
      }

      &:after {
        content: '';
        height: 100%;
        width: 100%;
        display: block;
        position: absolute;
        background: rgba(0, 0, 0, 0.3);
      }
    }

    & .verify_form {
      height: 100%;
      width: 100%;

      & .form_inner {
        background-color: #fff;
        background-image: url('../assets/images/popup_bg_2.jpg');
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        transition: transform 0.7s cubic-bezier(0.97, 0.01, 0.27, 1.01);
        border-radius: 15px;

        &.form_verify_error {
          animation: shake 0.8s ease;
        }

        & .close {
          height: 40px;
          width: 40px;
          border: 2px solid rgba(255, 255, 255, 0.8);
          border-radius: 50%;
          position: absolute;
          bottom: -70px;

          @media (max-height: 580px) {
            bottom: -60px;
          }

          left: 50%;
          transform: translate(-50%, 0%);

          &:before, &:after {
            opacity: 0.6;
            content: '';
            display: inline-block;
            position: absolute;
            height: 28px;
            left: 25%;
            top: 40%;
            width: 1px;
            background: #fff;
            transform: rotate(45deg) translate(-50%, -50%);
          }

          &:after {
            left: 75%;
            transform: rotate(-45deg) translate(-50%, -50%);
          }
        }

        & form {
          text-align: center;
          padding: 30px;

          @media (max-height: 580px) {
            padding-left: 15px;
            padding-right: 15px;
          }

          padding-top: 165px;
          padding-bottom: 40px;

          & .title {
            font-size: 22px;
            color: co_5;
            margin-bottom: 30px;
          }

          & .inputGrop {
            position: relative;

            & label {
              position: absolute;
              top: 15px;
              left: 10px;
              color: #aaa;
              font-weight: lighter;
              font-size: 16px;
              transition: 0.15s ease;

              &.active {
                top: -12px;
                left: 3px;
                font-size: 12px;
                color: #333;
                font-weight: normal;
              }
            }

            & .tips {
              color: co_4;
              text-align: left;
              margin: 0;
              font-size: 12px;
              margin-bottom: 25px;
            }

            & input {
              box-sizing: border-box;
              height: 50px;
              width: 250px;
              outline: none;
              border: 0;
              border-bottom: 1px solid #f1f1f1;
              font-size: 22px;
              padding: 0 10px;
              margin-bottom: 5px;
              background: rgba(0, 0, 0, 0);
              border-radius: 5px;

              &.is_error {
                border: 1px solid co_4;

                & ~ label.active {
                  top: -20px;
                }

                & ~ button {
                  display: none;
                }
              }
            }

            & button {
              height: 30px;
              border: 0;
              padding: 0 15px;
              display: inline-block;
              background: #f1f1f1;
              color: co_4;
              font-size: 12px;
              position: absolute;
              top: 10px;
              right: -10px;
              transform: scale(0.8);
              border-radius: 15px;
              cursor: default;

              &:focus {
                outline: none;
              }

              &:disabled {
                color: #999;
              }

              &.origin_status {
                display: none;
              }

              &:after {
                display: none;
              }
            }
          }

          &>button {
            position: relative;
            cursor: pointer;
            height: 50px;
            width: 250px;
            outline: none;
            border: 0;
            border-radius: 50px;
            font-size: 16px;
            background: co_4;
            color: #fff;

            &:after {
              content: '';
              display: block;
              position: absolute;
              top: 8px;
              left: 50%;
              transform: translateX(-50%);
              width: 90%;
              height: 90%;
              background: co_4;
              filter: blur(8px);
              z-index: 0;
            }

            & span {
              position: relative;
              z-index: 11;
            }
          }
        }
      }
    }

    & .verify_succeed {
      height: 100%;
      width: 100%;
      position: relative;
      background: co_6;

      &:before, &:after {
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        margin-top: 220px;
        z-index: 10;
      }

      &:before {
        background-color: co_9;
      }

      &:after {
        background-image: url('../assets/images/sf_succeed_bg_lace.png');
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center top;
        min-width: 375px;
        max-width: 385px;
        top: -55px;
      }

      & .inner {
        & .decorate {
          height: 600px;
          width: 50px;
          background: #fff;
          filter: blur(60px);
          position: absolute;
          top: 65%;
          left: 50%;
          transform: translate(-50%, -50%);
          opacity: 0.7;
          z-index: 11;
        }

        & .head {
          transform: translateY(100px);

          &.act {
            // animation: animation 1800ms linear both;
            transform: translateY(0);
            transition: 0.7s cubic-bezier(0.97, 0.01, 0.27, 1.01);

            & .head_bg {
            }
          }

          @media (min-height: 700px) {
            margin-bottom: 30px;
          }

          @media (min-height: 800px) {
            margin-bottom: 50px;
          }

          & .head_bg {
            position: relative;
            width: 100%;
            top: 0;
            left: 0;

            & .title_text {
              height: 60px;
              position: absolute;
              top: 43%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: 10;

              & img {
                position: relative;
                height: 100%;
                width: auto;
                animation: shake-little 5s linear infinite;
              }

              &:before {
                position: absolute;
                height: 150px;
                width: 50px;
                // content: '';
                top: -50px;
                left: 50px;
                display: inline-block;
                background: #fbe6c1;
                transform: rotate(-30deg);
                left: -100%;
                filter: blur(20px);
                opacity: 0.5;
                // animation: shine 3500ms infinite;
                mix-blend-mode: lighten;
                z-index: 11;
              }
            }

            &>img {
              position: relative;
              left: 50%;
              transform: translateX(-50%);
              min-width: 375px;
              max-width: 385px;
            }
          }
        }

        & .main {
          &.act {
            opacity: 1;
            transform: translateY(0);
          }

          transition: 0.7s cubic-bezier(0.97, 0.01, 0.27, 1.01);
          transform: translateY(100px);
          width: 85%;
          margin: 0px auto;
          position: relative;
          z-index: 12;

          @media (max-height: 580px) {
            margin-top: 35px;
          }

          &:before {
            content: '';
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            height: 200px;
            width: 90%;
            background: #5f121c;
            filter: blur(20px);
            opacity: 0.6;
          }

          & .main_content {
            margin: 0 auto;
            background: co_6;
            padding: 0;
            border-radius: 10px;
            position: relative;

            & .content_title {
              position: absolute;
              top: -15px;
              left: 25px;
              padding: 5px 15px;
              transform: skewX(-15deg);

              & span {
                position: relative;
                z-index: 3;
              }

              &:before, &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                display: inline-block;
                height: 100%;
                width: 100%;
                background-image: linear-gradient(-56deg, rgb(254, 136, 33) 0%, rgb(255, 99, 38) 100%);
                border-radius: 10px;
                z-index: 1;
              }

              &:after {
                top: auto;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                background: #dc4609;
                height: 50%;
                width: 90%;
                z-index: 0;
                filter: blur(5px);
              }
            }

            & .content_list {
              padding: 30px 80px 20px 15px;

              & li {
                color: co_4;
                list-style: none;
                margin: 10px 0;
                padding: 0;
                font-size: 14px;
                padding-left: 15px;
                position: relative;
                vertical-align: middle;

                &:before {
                  content: '1';
                  height: 16px;
                  width: 16px;
                  border-radius: 50%;
                  background: co_4;
                  display: inline-block;
                  color: #fff;
                  font-size: 12px;
                  text-align: center;
                  line-height: 16px;
                  margin-right: 3px;
                  position: absolute;
                  vertical-align: middle;
                  left: -5px;
                }

                &:nth-child(1) {
                  &:before {
                    top: 50%;
                    transform: translateY(-50%);
                  }
                }

                &:nth-child(2) {
                  & i {
                    font-size: 12px;
                    opacity: 0.8;
                    display: block;
                    font-style: normal;
                  }

                  &:before {
                    content: '2';
                  }
                }

                &:nth-child(3) {
                  border-radius: 3px;
                  margin: 5px auto;
                  padding: 0;
                  height: 90px;
                  width: 90px;
                  background-color: rgba(252, 84, 108, 0.8);
                  background-image: url('../assets/images/QRcode.jpg');
                  background-size: 90%;
                  background-repeat: no-repeat;
                  background-position: center;

                  & i {
                    width: 100px;
                    display: block;
                    font-style: normal;
                    font-size: 12px;
                    position: absolute;
                    left: 110%;
                    bottom: 0;
                  }

                  &:before {
                    display: none;
                  }
                }
              }
            }

            & .content_mode {
              &.act {
                top: -140px;
                right: -40px;
                transform: scale(1);
                transition: 0.7s cubic-bezier(0.97, 0.01, 0.27, 1.01);
              }

              position: absolute;
              height: 300px;
              top: -40px;
              right: -40px;
              z-index: 100;
              transform: scale(0.7);

              & img {
                height: 100%;
              }
            }
          }

          & .main_sub {
            &.act {
              opacity: 1;
              transform: translateY(0);
            }

            opacity: 0;
            transition: 0.9s cubic-bezier(0.97, 0.01, 0.27, 1.01);
            transform: translateY(200px);
            position: relative;
            margin: 0 auto;
            text-align: center;
            z-index: 100;

            @media (max-height: 580px) {
              display: none;
            }

            & .sub_title {
              position: relative;
              margin: 0 auto;
              display: inline-block;

              @media (max-height: 580px) {
                display: none;
              }

              & span {
                margin: 5px 3px 5px;

                @media (min-height: 800px) {
                  margin: 15px 3px 5px;
                }

                display: inline-block;
              }

              & i {
                position: relative;
                top: 50%;
                transform: translateY(-50%);
                height: 6px;
                width: 6px;
                border-radius: 50%;
                background: #fff;
                display: inline-block;

                &:before, &:after {
                  position: absolute;
                  content: '';
                  height: 4px;
                  width: 4px;
                  border-radius: 50%;
                  background: #fff;
                  display: inline-block;
                  left: -10px;
                  top: 50%;
                  transform: translateY(-50%);
                  opacity: 0.6;
                }

                &:after {
                  opacity: 0.3;
                  height: 3px;
                  width: 3px;
                  left: -20px;
                }

                &:nth-child(3) {
                  &:before {
                    left: 13px;
                  }

                  &:after {
                    left: 23px;
                  }
                }
              }
            }

            & .sub_list {
              text-align: left;
              padding-left: 15px;
              margin: 10px 0;

              @media (max-height: 580px) {
                margin-top: 25px;
              }

              & li {
                font-size: 12px;
                margin-bottom: 5px;
                font-weight: lighter;

                @media (max-height: 580px) {
                  margin-bottom: 0;
                }
              }
            }
          }
        }
      }
    }

    & .verify_field {
      background: #fff;
      height: 100%;
      width: 100%;
      position: relative;
      background: co_7;

      & .inner {
        @media (max-height: 580px) {
          transform: translateY(-50px);
        }

        & .decorate {
          height: 600px;
          width: 50px;
          background: #fff;
          filter: blur(60px);
          position: absolute;
          top: 65%;
          left: 50%;
          transform: translate(-50%, -50%);
          opacity: 0.7;
        }

        & .head {
          @media (min-height: 700px) {
            margin-bottom: 30px;
          }

          @media (min-height: 800px) {
            margin-bottom: 50px;
          }

          & .head_bg {
            width: 100%;
            top: 0;
            left: 0;

            & img {
              width: 100%;
            }
          }
        }

        & .main {
          &.act {
            transform: translateY(0) scale(1);
          }

          transform: translateY(300px) scale(1.2);
          transition: 0.7s cubic-bezier(0.97, 0.01, 0.27, 1.01);
          width: 85%;
          margin: 120px auto 0;
          position: relative;
          z-index: 1;

          @media (min-height: 800px) {
            margin: 150px auto 0;
          }

          &:before {
            content: '';
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            height: 185px;
            width: 90%;
            background: #182952;
            filter: blur(20px);
            opacity: 0.8;
          }

          & .main_content {
            margin: 0 auto;
            background: co_8;
            padding: 0;
            border-radius: 10px;
            position: relative;

            & .content_title {
              position: absolute;
              top: -15px;
              left: 25px;
              padding: 5px 15px;
              transform: skewX(-15deg);

              & span {
                position: relative;
                z-index: 3;
              }

              &:before, &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                display: inline-block;
                height: 100%;
                width: 100%;
                background-image: linear-gradient(-56deg, #6a8fe5 0%, #7f7fea 100%);
                border-radius: 10px;
                z-index: 1;
              }

              &:after {
                top: auto;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                background: #4962bb;
                height: 50%;
                width: 90%;
                z-index: 0;
                filter: blur(5px);
              }
            }

            & .content_list {
              padding: 30px 85px 20px 15px;

              & li {
                color: co_7;
                list-style: none;
                margin: 10px 0;
                padding: 0;
                font-size: 14px;
                padding-left: 15px;
                position: relative;
                vertical-align: middle;

                &:before {
                  content: '1';
                  height: 16px;
                  width: 16px;
                  border-radius: 50%;
                  background: co_7;
                  display: inline-block;
                  color: #fff;
                  font-size: 12px;
                  text-align: center;
                  line-height: 16px;
                  margin-right: 3px;
                  position: absolute;
                  vertical-align: middle;
                  left: -5px;
                }

                &:nth-child(1) {
                  &:before {
                    top: 50%;
                    transform: translateY(-50%);
                  }
                }

                &:nth-child(2) {
                  & i {
                    font-size: 12px;
                    opacity: 0.8;
                    display: block;
                    font-style: normal;
                  }

                  &:before {
                    content: '2';
                  }
                }

                &:nth-child(3) {
                  border-radius: 3px;
                  margin: 5px auto;
                  padding: 0;
                  height: 90px;
                  width: 90px;
                  background-color: rgba(103, 141, 228, 0.8);
                  background-image: url('../assets/images/QRcode.jpg');
                  background-size: 90%;
                  background-repeat: no-repeat;
                  background-position: center;

                  & i {
                    width: 100px;
                    display: block;
                    font-style: normal;
                    font-size: 12px;
                    position: absolute;
                    left: 110%;
                    bottom: 0;
                  }

                  &:before {
                    display: none;
                  }
                }
              }
            }

            & .content_mode {
              position: absolute;
              height: 300px;
              top: -140px;
              right: -40px;
              z-index: 100;

              & img {
                height: 100%;
              }
            }

            & .content_context {
              height: 60px;
              width: 180px;
              border-radius: 50px;
              background: co_4;
              text-align: center;
              line-height: 16px;
              position: absolute;
              top: -40%;
              font-size: 12px;
              padding: 15px 10px;
              box-sizing: border-box;
              animation: shake-little 5s linear infinite;

              & svg {
                height: 20px;
                position: absolute;
                top: -10px;
                right: -50px;
                transform: rotate(30deg);

                & .st0 {
                  fill: #FC546C;
                  stroke-miterlimit: 10;
                }
              }

              @media (max-height: 580px) {
                left: -10px;
                transform: scale(0.88);
              }
            }
          }
        }
      }
    }
  }
}

.watchStatus {
  position: absolute;
  top: 0;
  left: 10px;
}

.verifyPopupTransition-enter-active, .verifyPopupTransition-leave-active {
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.verifyPopupTransition-enter, .verifyPopupTransition-leave-to {
  opacity: 0;
  transform: scale(1.1);
}

.verifyFormTransition-enter-active, .verifyFormTransition-leave-active {
  transition: all 1.2s cubic-bezier(0.97, 0.01, 0.27, 1.01);
}

.verifyFormTransition-enter, .verifyFormTransition-leave-to {
  transform: scale(0.5) translateY(-800px);
  opacity: 0;
}

.verifySucceedTransition-enter-active {
  transition: all 1.8s cubic-bezier(0.97, 0.01, 0.27, 1.01);
}

.verifySucceedTransition-enter {
  transform: scale(1) translateY(500px);
  opacity: 1;
}

.verifySucceedTransition-enter-to {
  transform: scale(1) translateY(0);
  opacity: 1;
}

@keyframes shake {
  from, to {
    transform: translate(-50%, -50%);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate(-53%, -50%);
  }

  20%, 40%, 60%, 80% {
    transform: translate(-47%, -50%);
  }
}

@keyframes eyeClose {
  from, to {
    transform: scaleY(1);
  }

  10% {
    transform: scaleY(0.1);
  }

  10.01% {
    transform: scaleY(1);
  }
}

@keyframes shine {
  from {
    left: -100%;
  }

  30% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}
</style>